<template>
  <div>
    <el-dialog
        v-model="centerDialogVisible"
        :title="formTitle"
        width="85%"
        destroy-on-close
        center
        @close="dialogClose">
      <div>
        <el-button class="Btn" size="small" type="danger" @click="addUser">添加</el-button>
      </div>
      <el-table
          :data="tableData"
          :default-sort="{ prop: 'date', order: 'descending' }"
          style="width: 100%;height: 400px">
        <el-table-column prop="userName" label="用户名" align="center"/>
        <el-table-column prop="loginName" label="登录名" align="center"/>
        <el-table-column prop="mobile" label="电话号码"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button class="Btn" size="small" type="del" @click="updateUser(scope.row)">
              <svg-icon icon-class="edit" class="buttonSvg"/>
            </el-button>
            <el-button class="btn-donate" size="small" type="del" @click="deleteUser(scope.row.userId)">
              <svg-icon icon-class="del" class="buttonSvg"/>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <edit-domain-principal-dialog ref="edit_domain_principal_dialog"/>
  </div>
</template>

<script>

import EditDomainPrincipalDialog from "@/views/domain/components/EditDomainPrincipalDialog.vue";

let me;
export default {
  name: "DomainPrincipalDialog",
  components: {EditDomainPrincipalDialog},
  data() {
    return {
      domainId: '',
      formTitle: '',
      centerDialogVisible: false,
      tableData: [],
    }
  },
  methods: {
    showDialog(id) {
      me = this;
      me.domainId = id;
      this.dataQuery();
      this.centerDialogVisible = true;
    },
    addUser() {
      this.$refs.edit_domain_principal_dialog.showDialog(me.domainId,'');
    },
    updateUser(row) {
      this.$refs.edit_domain_principal_dialog.showDialog(me.domainId, row);
    },

    deleteUser(id) {
      this.$confirm("是否删除该区域用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "confirm"
      })
          .then(async () => {
            try {
              let response = await this.$asyncPost("user", {
                actionType: "userDelete",
                /*userIdList: this.selected.map(item => item.userId),*/
                userIdList: [id]
              });
              if (response.success) {
                this.$message.success("删除成功");
                this.dataQuery(); // 重新获取数据以更新列表
              } else {
                this.$message.error(response.message);
              }
            } catch (error) {
              this.$message.error("删除时发生错误");
            }
          })
          .catch(() => {
            this.$message.info("取消");
          })
    },
    async dataQuery() {
      let response = await this.$asyncPost("domain", {
        actionType: "domainManagerQuery",
        domainId: me.domainId
      });
      if (response.success) {
        me.tableData = response.dataList;
      } else {
        this.$message.error(response.message);
      }
    },
    dialogClose() {

    },
  }
}
</script>

<style scoped lang="scss">

</style>